<template>
  <div class="dh_video">
    <video
      id="h5_video"
      style="width: 100%; height: 100%; position: absolute; top: -13px; left: 0px"
    ></video>
    <canvas id="h5_canvas" style="width: 100%; height: 100%; display: none"></canvas>
    <span class="title">{{ title }}</span>
    <div class="name">{{ name }}</div>
    <span class="megaphone" v-if="isShow">
      <img v-if="inx === 1" @click="OnSound" src="../assets/open.png" />
      <img v-else @click="onTurnSoundOff" src="../assets/stop.png" />
    </span>
    <div v-if="inx === 0" class="megaphone_open">
      <el-slider v-model="value"></el-slider>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    info: {},
    WndIndex: {},
  },
  data() {
    return {
      h5_video: null,
      h5_canvas: null,
      playerInstance: null,
      title: "加载中...",
      inx: 1, //小喇叭
      name: "",
      value: 30,
      isShow: false,
    };
  },
  watch: {
    value(val) {
      // console.log("val",val);
      this.playerInstance[this.WndIndex].setAudioVolume(val / 100 - 0);
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.onLogin();
    });
  },
  methods: {
    formatTooltip(val) {
      return val / 100;
    },
    //  登录
    onLogin() {
      //   console.log("info", this.info);
      if (this.info) {
        let ip = this.info.url;
        let port = this.info.port;
        let name = this.info.user;
        let pswd = this.info.pwd;
        // debugger;
        let target = ip + ":" + port;
        setIP(target);
        RPC.login(name, pswd, false)
          .then((res) => {
            // console.log("登录设备+++", res);
            setCookie("DWebClientSessionID", "", -1);
            setCookie("DhWebClientSessionID", "", -1);
            /**
             * RPC.keepAlive 保活
             */
            RPC.keepAlive(300, 60000, _getSession(), target, this.WndIndex);
            // this.afterLogin();
            this.onRealPreview(ip, port, name, pswd); //登录后拉流
          })
          .catch((err) => {
            console.log("err===", err);
          });
      }
    },
    // 登录成功后 拉流
    onRealPreview(ip, port, name, pswd) {
      var _that = this;
      _that.h5_video = document.getElementById("h5_video");
      _that.h5_canvas = document.getElementById("h5_canvas");
      _that.playerInstance = [];
      if (_that.playerInstance[_that.WndIndex]) {
        _that.playerInstance[_that.WndIndex].stop();
        _that.playerInstance[_that.WndIndex].close();
        _that.playerInstance[_that.WndIndex] = null;
        // playerInstance[0].setAudioVolume(0.8);
        let dom = _that.h5_canvas;
        if (dom.style.display === "none") {
          dom = _that.h5_video;
        }
        dom.style.display = "none";
      }
      var player = null;
      let curChannel = 0 + 1; //无插件通道号从1开始
      let stream = 0 - 0;
      let options = {
        wsURL: "ws://" + ip + ":" + port + "/rtspoverwebsocket",
        rtspURL:
          "rtsp://" +
          ip +
          ":" +
          port +
          "/cam/realmonitor?channel=" +
          curChannel +
          "&subtype=" +
          stream +
          "&proto=Private3",
        username: name,
        password: pswd,
        lessRateCanvas: true,
      };
      //   console.log("options", options);
      var player = new window.PlayerControl(options);
      // console.log("player", player);

      // 分辨率改变
      player.on("MSEResolutionChanged", function (e) {
        console.log("分辨率改变：", e);
      });

      // 开始播放
      player.on("PlayStart", function (e) {
        console.log("开始播放：", e);
        _that.playerInstance[_that.WndIndex] = player;
        var dom = document.querySelector(".title");
        dom.style.display = "none";
        _that.name = _that.info.name;
        _that.isShow = true;
      });

      // 开始解码
      player.on("DecodeStart", function (e) {
        // console.log("开始解码：", e);
        if (e.decodeMode === "video") {
          _that.h5_canvas.style.display = "none";
          _that.h5_video.style.display = "";
        } else {
          _that.h5_video.style.display = "none";
          _that.h5_canvas.style.display = "";
        }
      });

      player.on("GetFrameRate", function (e) {
        // console.log("视频帧率: " + e);
      });

      // 视频编码模式改变
      player.on("FrameTypeChange", function (e) {
        console.log("视频编码模式改变: " + e);
      });

      // 播放发生错误
      player.on("Error", function (e) {
        console.log("播放发生错误: " + JSON.stringify(e));
      });
      // 文件加载完成
      player.on("WorkerReady", function () {
        // console.log("开始拉流");
        player.connect();
      });
      player.init(_that.h5_canvas, _that.h5_video); //初始化播放器
    },
    // 开启声音
    OnSound() {
      if (this.playerInstance[this.WndIndex]) {
        this.playerInstance[this.WndIndex].setAudioVolume(this.value / 100 - 0);
        this.inx = 0;
      }
    },
    // 关闭声音
    onTurnSoundOff() {
      if (this.playerInstance[this.WndIndex]) {
        this.value = 0;
        this.playerInstance[this.WndIndex].setAudioVolume(0);
        this.inx = 1;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.dh_video {
  height: 100%;
  background-color: #000000;
  position: relative;
  .title {
    position: absolute;
    top: 3px;
    left: 6px;
    display: block;
    color: #fff;
    font-size: 13px;
  }
  .name {
    color: #fff;
    width: 100%;
    font-size: 13px;
    position: absolute;
    bottom: 0;
    padding: 4px 0;
    // left: 6px;
    background-color: #000000;
  }
  .megaphone {
    position: absolute;
    bottom: 4px;
    right: 3%;
    width: 3%;
    height: 5%;
    // background-color: green;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .megaphone_open {
    position: absolute;
    bottom: -8px;
    right: 9%;
    width: 70px;
  }
}
</style>
